<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #e{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            zoom: 1;
        }
    </style>
</head>
<body>
    <div id="e"></div>
    <script>
        var e = document.getElementById("e");
        var flag = true;
        var left = 0;
        var rate = 1000/60;

        function render() {
            if(flag == true) {
                if(left >= 100) {
                    flag=false;
                }
                left += 1
                e.style.left = `${left}px`
            } else {
                if(left <= 0) {
                    flag = true;
                }
                left -= 1
                e.style.left = `${left}px`
            }
        }
        var rAFId = 0;
        var lastTime = new Date();
        (function animation() {
            nowTime = new Date();
            if((nowTime - lastTime) > rate) {
                lastTime = nowTime;
                render();
            }
            rAFId = window.requestAnimationFrame(animation);
        })();
        setTimeout(function() {
            window.cancelAnimationFrame(rAFId);
        }, 10000);
    </script>
</body>
</html>